<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" href="../scripts/plugins/port_picker/port_picker.css">
    <link rel="stylesheet" href="../scripts/plugins/port_picker/input_select.css">
</head>
<body>
<div>
    <input class="j_city_picker" type="text">
    <div class="port_picker_container">
        <div class="title">
            <span>热门港口 (可直接输入港口或港口拼音)</span>
        </div>
        <div class="tab">
            <ul>
                <li>热门</li>
                <li class="selected">东北</li>
                <li>华北</li>
                <li>华南</li>
                <li>华东</li>
                <li>福建</li>
                <li>山东</li>
            </ul>
        </div>
        <div class="main">
            <ul>
                <li class="selected">新港</li>
                <li>东莞(荣轩)</li>
                <li>南沙</li>
                <li>营口</li>
                <li>钦州</li>
                <li>上海</li>
                <li>汕头</li>
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript" src="../scripts/vendor/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../scripts/plugins/port_picker/port_picker.js"></script>
<script type="text/javascript" src="../scripts/plugins/port_picker/input_select.js"></script>
<script type="text/javascript">
    let options = {};
    options.source = [{
        code: "1",
        name: "热门",
        areaList: [{
            code: "10",
            name: "新港",
            areaList: []
        }, {
            code: "11",
            name: "东莞(荣轩)",
            areaList: []
        }, {
            code: "12",
            name: "营口",
            areaList: []
        }, {
            code: "13",
            name: "钦州",
            areaList: []
        }, {
            code: "14",
            name: "上海",
            areaList: []
        }, {
            code: "15",
            name: "汕头",
            areaList: []
        }, {
            code: "16",
            name: "汕头",
            areaList: []
        }]
    }, {
        code: "2",
        name: "东北",
        areaList: []
    }, {
        code: "3",
        name: "华北",
        areaList: [{
            code: "31",
            name: "新港",
            areaList: []
        }, {
            code: "32",
            name: "新港",
            areaList: []
        }, {
            code: "33",
            name: "新港",
            areaList: []
        }, {
            code: "34",
            name: "新港",
            areaList: []
        }, {
            code: "35",
            name: "新港",
            areaList: []
        }, {
            code: "36",
            name: "新港",
            areaList: []
        }]
    }, {
        code: "4",
        name: "华南",
        areaList: []
    }, {
        code: "5",
        name: "华东",
        areaList: []
    }, {
        code: "6",
        name: "福建",
        areaList: []
    }, {
        code: "7",
        name: "山东",
        areaList: []
    }];
    options.afterSelect = (area, port) => {
        $(".j_city_picker").val(area.name + "/" + port.name);
    };

    $(".j_city_picker").cityPicker(options);
</script>
</body>
</html>
